<template>
<view>
  <my-search></my-search>
  <u-swiper
    :list="swiperList"
    keyName="image_src"
    indicator
    indicatorMode="line"
    circular
    height="340rpx"
  >
  </u-swiper>
  <view class="navs">
    <navigator
      v-for="item in  navsList"
      :key="item.name"
    >
      <u--image
        width="100%"
        mode="widthFix"
        :src="item.image_src"
      ></u--image>
    </navigator>
  </view>
  <view class="floor" v-for="item in floorList" :key="item.floor_title.name">
      <view class="floor-group">
        <!-- 标题 -->
        <view class="floor-title">
          <u--image  :src="item.floor_title.image_src" width="100%" mode="widthFix"></u--image>
        </view>
        <!-- 内容 -->
        <view class="floor-center">
          <navigator v-for="(itemA,index) in item.product_list" :key="itemA.name">
            <u--image v-if="index===0"  :src="itemA.image_src"  width="100%" mode="widthFix"></u--image>
            <u--image v-else  :src="itemA.image_src"  width="100%" height="188rpx" mode="scaleToFill"></u--image>
          </navigator>
        </view>
      </view>
  </view>
</view>

</template>

<script>
export default{
  data(){
    return{
      swiperList:[],
      navsList:[],
      floorList:[]
    }
  }, 
  onLoad(){
    // const [err,res] =await uni.request({url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'});
    // this.swiperList=res.data.message
    // const [errA,resA]= await uni.request({url:"https://api-hmugo-web.itheima.net/api/public/v1/home/catitems"});
    // this.navsList=resA.data.message
    // const [errB,resB]=await uni.request({url:"https://api-hmugo-web.itheima.net/api/public/v1/home/floordata"})
    // this.floorList=resB.data.message
    
    Promise.all([this.getSwiperList(),this.getNavsList(),this.getFloorList()])
  },
  methods:{
    async getSwiperList(){
      const {message:swiperList} =await uni.$u.http.get('/home/swiperdata')
      this.swiperList=swiperList
    },
    async getNavsList(){
      const {message:navsList} =await uni.$u.http.get('/home/catitems')
      this.navsList=navsList
    },
    async getFloorList(){
      const {message:floorList} =await uni.$u.http.get('/home/floordata')
      this.floorList=floorList
    }
  }
}
</script>

<style lang="scss" scoped>
  .top-search{
  padding: 10rpx;
  background-color: #ff2d4a;
}
.navs{
  display: flex;
  navigator{
    flex: 1;
    padding: 20rpx;
  }
}
.floor{
  .floor-group{
    .floor-title{
      margin-top: 15rpx;
    }
  }
  .floor-center{
    overflow: hidden;
    navigator{
      width: 232rpx;
      float: left;
      margin-left: 15rpx;
      &:nth-last-child(-n+2){
        margin-top: 10rpx;
      }
    }
  }
}
</style>

